<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>宜忌速查表</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="css/CAIFastCheck.css" />
		<style type="text/css">
			.van-sidebar{
				width: 100%;
			}
			.van-sidebar-item--select::before{
				width: 0;
			}
			.van-sidebar-item--select{
				color: #005BAC;
			}
			.van-tabs__nav--line{
				height: auto;
				padding: 0.2rem 0;
			}
			.van-tab{
				padding: 0.1rem 0.3rem;
				border-radius: 0.35rem;
				border: 1px solid #D8D8D8;
				margin-left: 0.3rem;
				color: rgba(0, 0, 0, 0.65);
				font-size: 0.3rem;
				flex: none;
			}
			.van-tab--active{
				border: 1px solid #005BAC;
				background: #e5eef6;
				color: #005BAC;
			}
			.van-tabs__line{
				display: none;
			}
		</style>
	</head>

	<body>
		<div id='app' v-cloak>
			<div class="id_container flex">
				<div class="cai_left_banner fontsize-ml" :style='{height:bannerh}'>
					<van-sidebar v-model='activeKey'>
						<van-sidebar-item :title="item.categoryName" v-for='(item,index) in category' :key='index' @click='linkToDetail(item.dataId)'/>
					</van-sidebar>
				</div>
				
				<div class="cai_right">
					<van-tabs v-model:active="active" @click="onClick">
						<van-tab v-for="(item,index) in tab" :key="index" :title="item">
							<van-list
								class='cai_list'
								:style="{height: divHeight}" 
								style="overflow-y: scroll"
								v-if="nothing==1"
								v-model="loading"
								:finished="finished"
								finished-text="没有更多了"
								@load="onLoad">
								<div class="cai_item flex" v-for='item in detail' @click="linkToArticle(item.dataId,item.checkStatus)">
									<div class="cai_item_img">
										<img v-if='item.checkStatus==1' src="img/good.png"/>
										<img v-if='item.checkStatus==2' src="img/bad.png"/>
									</div>
									<p>{{item.checkTitle}}</p>
								</div>
							</van-list>
							<van-empty 
								v-if="nothing==2" 
								class="custom-image" 
								image="img/blank_pic.png" 
								description="暂无数据" 
							/>
						</van-tab>
					</van-tabs>
					
				</div>
				
			</div>

		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script type="module">
		import {
			getAction,
			postAction,
			spliceWebsiteUrl,
		} from "../common/js/api/vue3-axios-utils.js";

		const PatientData = {
			data() {
				return {
					url: {
						getCategoryDetail:'/article/check/category',
						getListDetail:'/article/check/list',
					},
					activeKey:0,
					active:0,
					detail:[],
					category:[],
					nothing:2,
					page:1,
					pageSize:10,
					total_page:0,
					finished:false,
					loading:false,
					refreshing:false,
					checkStatus:1,
					bannerh:'',
					divHeight:'',
					tab:['适宜','禁忌']
				};
			},
			created() {
				this.caiCategory = url('?caiCategory')
				this.activeKey = Number(url('?caiCategory'))-1
				console.log('activeKey',this.activeKey)
				this.init()
			},
			methods: {
				async init () {
					this.bannerh=window.innerHeight+"px"
					this.divHeight = window.innerHeight-40+"px"
					await this.handleCategoryDetail();
					await this.handleListDetail();
				},
				handleCategoryDetail(){
					getAction(spliceWebsiteUrl(this.url.getCategoryDetail),{}).then((res) => {
						res = res.data
						console.log('handleCategoryDetail',res)
						if(res.success){
							if(res.result){
								for(var i=0;i<res.result.length;i++){
									this.category.unshift(res.result[i])
								}
							}
						}
					})
				},
				handleListDetail(){
					postAction(spliceWebsiteUrl(this.url.getListDetail),{checkCategory:this.caiCategory,checkStatus:this.checkStatus,pageNum:this.page,pageSize:this.pageSize}).then((res) => {
						res = res.data
						console.log('handleListDetail',res)
						if(res.success){
							if(res.result.records){
								this.nothing = 1
								this.total_page=res.result.pages
								this.total = res.result.total
								for(var i=0;i<res.result.records.length;i++){
									this.detail.push(res.result.records[i])
								}
							}else{
								this.nothing = 2
								this.detail = []
							}

						}else{
							this.nothing = 2
							this.detail = []
						}
					})
				},
				linkToDetail(id){
					this.caiCategory = id;
					this.page = 1
					this.checkStatus = 1
					this.active = 0
					this.loading = false;
					this.finished = false;
					this.detail = []
					this.handleListDetail()
				},
				onClick(name, title){
					this.checkStatus = name+1
					this.page = 1
					this.loading = false;
					this.finished = false;
					this.detail = []
					this.handleListDetail()
				},
				onLoad(){
					console.log('onload',this.page)
					if(this.page<this.total_page){
						this.page++
						this.handleListDetail()
					}
					this.loading = false;
					if(this.detail.length>=this.total){
						this.finished = true
					}
				},
				linkToArticle(id,state){
					window.location.href = './CAIArticle.html?id='+id+'&checkStatus='+state
				}
			},
			components:{
			}
		};

		const app = Vue.createApp(PatientData);

		app.use(vant);

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload);

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount("#app");
	</script>

</html>

